<template>
  <el-header style="background-color: #545c64">
    <div class="toolbar">
      <div><h2 class="logo-text">后台管理系统</h2></div>
      <el-dropdown>
        <el-icon style="margin-right: 8px; margin-top: 1px">
          <div style="color: white">{{ userName }}</div>
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { computed } from "vue";
// 这里可以引入用户信息的逻辑
import { useUserStore } from "@/store/userStore";
const userStore = useUserStore();
const userName = computed(() => userStore.username);

const router = useRouter();
const logout = () => {
  userStore.logout();
  router.push("/login");
};
</script>

<style scoped>
.logo-text {
  color: white;
  font-size: 20px;
  line-height: 40px;
  margin: 0, 0, 20px, 0;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
